<template>
    <el-dialog title="Edit" v-model="dialogFormVisible" :close-on-click-modal="false" :show-close="false">
        <el-form :model="form">
            <el-form-item label="id" :label-width="formLabelWidth">
                <el-input :disabled="true" v-model="form.id" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="学号" :label-width="formLabelWidth">
                <el-input v-model="form.student_id" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="学生姓名" :label-width="formLabelWidth">
                <el-input v-model="form.student_name" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="班级" :label-width="formLabelWidth">
                <el-input v-model="form.class_name" auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button :plain="true" type="danger" v-on:click="canclemodal">取消</el-button>
            <el-button :plain="true" v-if="!createNew" @click="deleteStudent(form)">删除</el-button>
            <el-button :plain="true" v-if="!createNew" @click="updateForm(form)">更新</el-button>
            <el-button :plain="true" v-if="createNew" @click="createStudent(form)">保存</el-button>
        </div>
    </el-dialog>
</template>


<script>
    const config = require("../../build/config");

    export default {
        data(){
            return {
                formLabelWidth: '120px',
            }
        },
        props: ['dialogFormVisible', 'form', 'createNew'],

        methods: {
            updateForm: function (formName) {
                let itemId = formName.id;
                let student_id = formName.student_id;
                let student_name = formName.student_name;
                let class_name = formName.class_name;
                this.$axios.put('http://' + config.dev.host + ':8000/api/students/detail/' + itemId, {
                    student_id: student_id,
                    student_name: student_name,
                    class_name: class_name,
                    author: "admin"
                })
                    .then(function (response) {
                        console.log(response);
                        this.form = response.data;

                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                location.reload();
            },
            createStudent: function (formName) {
                let itemId = formName.id;
                let student_id = formName.student_id;
                let student_name = formName.student_name;
                let class_name = formName.class_name;
                this.$axios.put('http://' + config.dev.host + ':8000/api/students/create/' + itemId, {
                    student_id: student_id,
                    student_name: student_name,
                    class_name: class_name,
                    author: "admin"
                })
                    .then(function (response) {
                        console.log(response);
                        this.form = response.data;

                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                location.reload();
            },
            deleteStudent: function(formName) {
                let itemId = formName.id;
                this.$axios.put('http://' + config.dev.host + ':8000/api/student/delete/' + itemId)
                    .then(function (response) {
                        console.log(response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                location.reload();
            },
            canclemodal: function () {
                this.$emit('canclemodal');
            }
        }

    }

</script>